@extends('layouts.back_stage')
@section('content')
  <style>
  #app{padding:10px}
  .touching{margin-left:10px;float:right}
  .but{margin-right:10px;overflow: hidden;}
  .ingred_sel{width:180px;margin:0 20px 0 5px}
  .shopBg{background:#fff;overflow: hidden;padding:29px 0 28px 20px;margin-top:15px;}
  .table_margin{padding:30px;background:#fff;text-align:center;margin-top:10px}
  .Pagination{margin-top:30px}
  [v-cloak] {display: none;}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  </style>
  <div class="container">
  <div style="padding:20px 20px 5px 0;overflow:hidden;"><h3 style="float:left;">管理员设置</h3></div>
      <div class="row app" id="app" v-cloak>
        <div class="but">
          <el-button type="primary" class="touching"  size="small">添加管理员</el-button>
       </div>
       <div class="shopBg">
                 <label>公司：</label>
                  <el-select class="ingred_sel"  size="small" v-model="demand.firm">
                            <el-option   :value="1" label="分公司"> 分公司</el-option>
                            <el-option   :value="2" label="代理商" > 代理商</el-option>
                            <el-option   :value="3" label="客户" > 客户</el-option>
                    </el-select>
                  <label>部门：</label>
                  <el-select class="ingred_sel"  size="small" v-model="demand.type">
                            <el-option   :value="1" label="分公司"> 分公司</el-option>
                            <el-option   :value="2" label="代理商" > 代理商</el-option>
                            <el-option   :value="3" label="客户" > 客户</el-option>
                    </el-select>
                    <label>名称：</label>
                    <el-input  class="ingred_sel"   size="small" placeholder="请输入名称" clearable></el-input>
                    <label>手机号：</label>
                    <el-input  class="ingred_sel"  size="small" placeholder="请输入完整手机号码" clearable></el-input>
                    <el-button  class="but-left" size="small" type="primary">搜索 </el-button>
          </div>
          <div class="table_margin">
               <template>
                  <el-table
                    :data="tableData"
                    border
                    :default-sort = "{prop: 'shopId', order: 'descending'}"
                    size="small"
                    style="width: 100%">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="商品名称">
                            <span>@{{ props.row.name }}</span>
                          </el-form-item>
                          <el-form-item label="所属店铺">
                            <span>@{{ props.row.shop }}</span>
                          </el-form-item>
                          <el-form-item label="商品 ID">
                            <span>@{{ props.row.id }}</span>
                          </el-form-item>
                          <el-form-item label="店铺 ID">
                            <span>@{{ props.row.shopId }}</span>
                          </el-form-item>
                          <el-form-item label="商品分类">
                            <span>@{{ props.row.category }}</span>
                          </el-form-item>
                          <el-form-item label="店铺地址">
                            <span>@{{ props.row.address }}</span>
                          </el-form-item>
                          <el-form-item label="aa">
                            <span>@{{ props.row.address }}</span>
                          </el-form-item>
                          <el-form-item label="商品描述">
                            <span>@{{ props.row.desc }}</span>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column  type="index"  label="序号"  :resizable='false'  align="center" width="50"></el-table-column>
                    <el-table-column label="姓名" align="center"  :resizable='false'  prop="id"> </el-table-column>
                    <el-table-column label="手机号码" align="center"  :resizable='false'  prop="name"> </el-table-column>
                    <el-table-column  align="center" label="公司" :resizable='false'  sortable prop="desc"> </el-table-column>
                    <el-table-column label="部门" :resizable='false' sortable  align="center" prop="name"> </el-table-column>
                    <el-table-column label="角色名"  sortable  :resizable='false' align="center"  prop="name"></el-table-column>
                    <el-table-column  fixed="right"  label="操作"  :resizable='false'  width="90">
                      <template slot-scope="scope">
                        <el-button type="text" size="small">修改</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
               <div class="Pagination">
                  <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
               </div> 
          </div>
      </div>
  </div> 
 
  <script>
      const App=new Vue({
        el: '#app',
        data() {
          return {
              demand:{//上面查询
                firm:'',////公司
                type:''//部门
              },
           tableData: [{
                  id: '12987122',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }, {
                  id: '12987123',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }, {
                  id: '12987125',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }, {
                  id: '12987126',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }]
          }
        },
        methods: {
         
             
          },
     mounted() {
           
          },
      })
  </script>
@endsection